<template>
  <view class="order-detail">
    <view class="info-card">
      <!-- 头部 header -->
      <view class="info-header">
        <view>
          <view class="team-name"
            >{{ orderData.schoolOnfo.schoolName }}代取团队</view
          >
          <view class="position">
            <image
              :src="require('@/static/orderDetail/location.png')"
              style="height: 15px; width: 15px; margin-right: 5px"
            />
            <view class="intro">{{ orderData.schoolOnfo.schoolAddress }}</view>
          </view>
        </view>

        <view>
          <image
            @click="call"
            :src="require('@/static/orderDetail/mobile.png')"
            style="height: 30px; width: 30px; margin-right: 5px"
          />
          <image
            @click="toThere"
            :src="require('@/static/orderDetail/navigation.png')"
            style="height: 30px; width: 30px"
          />
        </view>
      </view>

      <view class="info-content">
        <!-- 订单详情 -->
        <view class="box">
          <view class="box-info" @click="toBoxDetail(item)">
            <view>
              <view class="kuaidi-name">{{ orderData.kuaidi.luaidiName }}</view>
              <view class="kuaidi-type"
                >{{ orderData.priceInfo.boxPriceName }}/{{
                  orderData.orderInfo.orderInfoBoxcode
                }}</view
              >
            </view>
            <view>
              <view>x1</view>
              <view>￥{{ orderData.priceInfo.boxPrice }}</view>
              <!-- <view
                class="custom-icon-chakan custom-icon"
                style="color: #adb838"
              >
              </view> -->
            </view>
          </view>

          <view class="finish-status">
            <u-steps
              :list="numList"
              :current="statusList[orderData.orderInfo.boxStatus]"
              mode="number"
              active-color="#adb838"
              icon="car-fill"
              :style="{ marginTop: '10px' }"
            ></u-steps>
          </view>
        </view>
        <view style="padding: 0 20rpx">
          <tui-time-axis>
            <tui-timeaxis-item backgroundColor="transparent" v-show="finish">
              <template v-slot:node>
                <view class="tui-node">
                  <tui-icon
                    name="check"
                    color="#fff"
                    :size="14"
                    bold
                  ></tui-icon>
                </view>
              </template>
              <template v-slot:content>
                <view>
                  <view class="tui-order-title">已送达</view>
                  <view class="tui-order-desc"
                    >您的订单已由配送员
                    <span>{{
                      orderData.orderInfo.boxFinishUserInfo.trueName
                    }}</span>
                    配送完成
                    <span
                      @click="
                        phoneNum(
                          orderData.orderInfo.boxFinishUserInfo.userPhone
                        )
                      "
                      >联系电话：{{
                        orderData.orderInfo.boxFinishUserInfo.userPhone
                      }}</span
                    >
                    。感谢您对e取寄得支持，欢迎再次光临。</view
                  >
                  <view class="tui-order-time tui-gray">{{
                    orderData.orderInfo.boxFinishTime
                  }}</view>
                </view>
              </template>
            </tui-timeaxis-item>
            <tui-timeaxis-item backgroundColor="transparent" v-show="send">
              <template v-slot:node>
                <view class="tui-node">
                  <tui-icon
                    name="transport"
                    color="#fff"
                    :size="14"
                    bold
                  ></tui-icon>
                </view>
              </template>
              <template v-slot:content>
                <view>
                  <view class="tui-order-title">配送中</view>
                  <view class="tui-order-desc"
                    >您的订单已由取货员
                    <span>{{
                      orderData.orderInfo.boxSendUserInfo.trueName
                    }}</span>
                    配送取货完成
                    <span
                      @click="
                        phoneNum(orderData.orderInfo.boxSendUserInfo.userPhone)
                      "
                      >联系电话：{{
                        orderData.orderInfo.boxSendUserInfo.userPhone
                      }}</span
                    >
                    。</view
                  >
                  <view class="tui-order-time tui-gray">{{
                    orderData.orderInfo.boxSendTime
                  }}</view>
                </view>
              </template>
            </tui-timeaxis-item>
            <tui-timeaxis-item backgroundColor="transparent">
              <template v-slot:node>
                <view class="tui-node">
                  <tui-icon
                    name="notice"
                    color="#fff"
                    :size="14"
                    bold
                  ></tui-icon>
                </view>
              </template>
              <template v-slot:content>
                <view>
                  <view class="tui-order-title">温馨提示</view>
                  <view class="tui-order-desc"
                    >您的订单将预计在今晚22点前送到您的手中</view
                  >
                </view>
              </template>
            </tui-timeaxis-item>
            <tui-timeaxis-item backgroundColor="transparent">
              <template v-slot:node>
                <view class="tui-node">
                  <tui-icon
                    name="order"
                    color="#fff"
                    :size="14"
                    bold
                  ></tui-icon>
                </view>
              </template>
              <template v-slot:content>
                <view>
                  <view class="tui-order-title">已下单</view>
                  <view class="tui-order-desc"
                    >您已提交了订单，请等待校园取货员进行取货</view
                  >
                  <view class="tui-order-time tui-gray">{{
                    orderData.orderInfo.boxPayTime
                  }}</view>
                </view>
              </template>
            </tui-timeaxis-item>
          </tui-time-axis>
        </view>

        <!-- 支付方式 金额 -->
        <view class="pay-method">
          <view>
            <view class="quest-left">支付方式</view>
            <view class="quest-right">{{
              orderData.order.orderPayMethod == "alipay" ? "支付宝" : "微信支付"
            }}</view>
          </view>
          <view>
            <view class="quest-left">金额统计</view>
            <view class="quest-right"
              >￥{{ orderData.priceInfo.boxPrice }}</view
            >
          </view>
          <view>
            <view class="quest-left">下单时间</view>
            <view class="quest-right">{{
              orderData.orderInfo.boxPayTime
            }}</view>
          </view>
          <view>
            <view class="quest-left">订单号</view>
            <view class="quest-right">{{
              orderData.orderInfo.boxOrderNum
            }}</view>
          </view>
          <!-- <view>
            <view class="quest-left">短信</view>
            <view class="quest-right">{{ orderInfo.orderInfoRemark }}</view>
          </view> -->
        </view>
        <!-- 短信 -->
        <view>
          <view class="messgae-title"> 驿站短信</view>
          <view class="message">
            {{ orderData.orderInfo.orderInfoRemark }}
          </view>
        </view>

        <!-- 完成状态 -->
        <!-- <view class="finish-status">
          <u-steps
            :list="numList"
            :current="statusList[orderInfo.orderStatus]"
            mode="number"
            active-color="#adb838"
            icon="car-fill"
            :style="{ marginTop: '10px' }"
          ></u-steps>
        </view> -->

        <!-- 再来一单 -->
        <!-- <u-button type="error" >删除订单</u-button> -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 代取团队信息
      team: {
        schoolName: "",
        schoolAddress: "",
      },
      // 订单信息
      orderInfo: {},
      //快递信息
      kuaidiList: [],
      statusList: {
        TRADE_SUCCESS: 1,
        DELIVERYING: 2,
        DELIVERY_FINISH: 3,
      },
      finish: false,
      send: false,
      numList: [
        {
          name: "支付成功",
        },
        {
          name: "待配送",
        },
        {
          name: "配送中",
        },
        {
          name: "配送完成",
        },
      ],
      orderData: {},
    };
  },
  onLoad(option) {
    this.$u.api
      .orderDetailApi({ orderInfoId: option.orderInfoId })
      .then((res) => {
        this.orderData = res;
        if (res.orderInfo.boxFinishUserInfo != null) {
          this.finish = true;
          this.send = true;
        }
        if (res.orderInfo.boxSendUserInfo != null) {
          this.send = true;
        }
      });
  },
  methods: {
    /**
     * 打电话
     */
    call() {
      if (this.orderData.schoolOnfo.schoolPhone === null) {
        this.$u.toast("该学校未设置负责人电话");
        return;
      }
      uni.makePhoneCall({
        phoneNumber: this.orderData.schoolOnfo.schoolPhone,
      });
    },
    phoneNum(phone) {
      uni.makePhoneCall({
        phoneNumber: phone,
      });
    },
    /**
     * 去哪里
     */
    toThere() {
      if (
        this.orderData.schoolOnfo.schoolLatitude === null ||
        this.orderData.schoolOnfo.schoolLongitude === null
      ) {
        this.$u.toast("该学校未设置地理位置");
        return;
      }
      uni.openLocation({
        latitude: Number.parseFloat(this.orderData.schoolOnfo.schoolLatitude),
        longitude: Number.parseFloat(this.orderData.schoolOnfo.schoolLongitude),
        address: this.orderData.schoolOnfo.schoolAddress,
        success: function () {
          console.log("success");
        },
      });
    },
  },
  created() {},
};
</script>

<style scoped lang ='less' >
.tui-order-header {
  padding: 30rpx;
  box-sizing: border-box;
  background: #fff;
}

.tui-text {
  font-size: 28rpx;
  color: #333;
  padding: 4rpx;
}

.tui-bold {
  font-weight: bold;
}

.tui-node {
  height: 44rpx;
  width: 44rpx;
  border-radius: 50%;
  background-color: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.tui-node-dot {
  height: 16rpx;
  width: 16rpx;
  background-color: #ddd;
  border-radius: 50%;
  /* transform: translateY(45%); */
  margin-top: 6rpx;
}

.tui-bg-primary {
  background: #eb0909 !important;
}

.tui-order-tracking {
  padding: 30rpx 30rpx 30rpx 40rpx;
  background: #fff;
  margin-top: 20rpx;
  box-sizing: border-box;
}

.tui-order-title {
  padding-bottom: 12rpx;
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.tui-order-desc {
  padding-bottom: 12rpx;
  font-size: 28rpx;
  color: #333;
  & > span {
    color: #adb838;
  }
}

.tui-ptop {
  display: flex;
  justify-content: flex-start;
  line-height: 28rpx;
}

.tui-order-time {
  font-size: 24rpx;
  font-weight: bold;
}

.tui-gray {
  color: #848484 !important;
}

.tui-light-gray {
  color: #888 !important;
}

.tui-primary {
  color: #5677fc;
}

.message {
  color: #333333;
  text-align: justify;
  padding: 10rpx;
  background-color: #f7f7f7;
  border-radius: 15rpx;
}
.messgae-title {
  font-size: 35rpx;
  width: 100%;
  text-align: center;
  padding: 30rpx 0 20rpx 0;
}
.order-detail {
  width: 100v;
  min-height: 100vh;
  background-color: #eff5f7;
  padding: 10px;
  .info-card {
    background-color: #ffffff;
    padding: 10px 20px;
    .info-header {
      height: 65.5px;
      display: flex;
      /* margin: 0px 10px 10px 10px; */
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      /* border-bottom: 1px solid #f3f3f3; */
      & > view:nth-child(1) {
        display: flex;
        flex-direction: column;
        .team-name {
          color: #5a5b5c;
          font-size: 16px;
        }
        .position {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          margin-top: 10px;
        }
        .intro {
          color: #919293;
          font-size: 12px;
        }
      }
    }
    .info-content {
      margin-top: 10px;
      border-top: 1px solid #f6f6f6;
      .box {
        display: flex;
        flex-direction: column;
        .box-info {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          margin: 20px 0;
          .kuaidi-name {
            font-size: 16px;
            color: #5a5b5c;
            margin-bottom: 5px;
          }
          .kuaidi-type {
            color: #919293;
            font-size: 12px;
          }
          & > view:nth-child(2) {
            width: 130px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: row;
            & > view:nth-child(1) {
              font-size: 14px;
              color: #5a5b5c;
            }
            & > view:nth-child(2) {
              font-weight: 700 !important;
              font-size: 14px;
              color: #5a5b5c;
            }
          }
        }
      }
      .pay-method {
        /* height: 115 * 2px; */
        border-top: 1px solid #f6f6f6;
        line-height: 47.5px;
        margin-top: 30px;
        & > view {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-direction: row;
          .quest-left {
            font-size: 14px;
            color: #5a5b5c;
          }
          .quest-right {
            font-size: 14px;
            color: #5a5b5c;
            font-weight: 700 !important;
          }
        }
      }
      .finish-status {
        /* border-bottom: 1px solid #f6f6f6; */
        margin-bottom: 20px;
        text-align: center;
        padding: 10px;
      }
    }
  }
}
</style>
